<template>
  <div>
    <Breadcrumb></Breadcrumb>
    <PageLayout>
      <div class="table-container height-100">
        <EZTable
          v-loading="tableLoading" :table-id="tableId"
          :table-hdl="tableHdl" :rows="reviewList" :custom-empty="true"
          @pageChanged="getReviewList" @sizeChanged="getReviewList"
          @filterChange="getReviewList">
          <EmptyContent slot="empty"></EmptyContent>
        </EZTable>
      </div>
      <el-dialog v-loading="reviewFormLoading" :visible.sync="showReviewDialog" :append-to-body="true"
                 :close-on-click-modal="false" title="提交审核" width="600px" top="100px">
        <el-form :ref="reviewFormRef" :model="reviewForm" :rules="reviewFormRules" size="medium"
                 label-width="80px">
          <el-form-item prop="auditRemark" label="审核备注">
            <el-input v-model="reviewForm.auditRemark" type="textarea" placeholder="请填写审核备注"></el-input>
          </el-form-item>
          <div class="mar-top text-align-right">
            <el-button type="info" @click="showReviewDialog = false">取消</el-button>
            <el-button type="primary" @click="reviewFormSubmit">提交</el-button>
          </div>
        </el-form>
      </el-dialog>
    </PageLayout>
  </div>
</template>

<script>
  import {tableIdConfig, tableOptBtnConfig} from '@/config/table';
  import {confirmHandle, deepCopyWithJson} from "@/utils";
  import {assembleTableOptBtn, getTableConfig, TableStateHdl} from "@/modules/routeParamStateHdl";
  import componentReviewTableCfg from "../../../config/table/componentReview";
  import EZTable from '../../../components/table/EZTable.vue';
  import {componentTypeArray, componentReviewArray} from "@/config/common";

  export default {
    name: "ComponentReview",
    components: {
      EZTable
    },
    data() {
      return {
        tableId: tableIdConfig.componentReview,
        tableLoading: true,
        tableHdl: null,
        reviewList: [],
        showReviewDialog: false,
        reviewFormLoading: false,
        reviewFormRules: {
          auditRemark: [
            {required: true, message: '请填写审核备注', trigger: ['blur', 'change']}
          ],
        },
        reviewForm: {},
        reviewFormRef: 'reviewFormRef',
        selectedReview: {},
      }
    },
    activated() {
      this.initTableConfig();
      this.initReviewForm();
      this.getReviewList();
    },
    methods: {
      initTableConfig() {
        if (this.tableHdl) return;
        const {columns = [], filters = []} = getTableConfig(this.tableId, componentReviewTableCfg);
        assembleTableOptBtn(columns, ({type = '', data = {}}) => {
          if (!type) return;
          this.selectedReview = deepCopyWithJson(data);
          const {_id, componentName} = data;
          switch (type) {
            case tableOptBtnConfig.pass.type:
              this.reviewForm.auditResult = 1;
              this.reviewForm._id = _id;
              confirmHandle({label: `确定要将组件：${componentName} 通过审核吗?`}).then(() => {
                this.componentReviewHandle();
              }).catch(() => {
              });
              break;
            case tableOptBtnConfig.back.type:
              this.showReviewDialog = true;
              this.reviewForm.auditResult = 2;
              this.reviewForm._id = _id;
              break;
            default:
              break;
          }
        });
        this.tableHdl = new TableStateHdl(this.$route.name, this.tableId, columns, filters);
      },
      initReviewForm() {
        this.reviewForm = {
          auditResult: 0,
          auditRemark: '',
          _id: ''
        };
      },
      resetReviewForm() {
        this.initReviewForm();
        const reviewForm = this.$refs[this.reviewFormRef];
        reviewForm && reviewForm.resetFields();
      },
      getReviewList() {
        this.tableLoading = true;
        const tableParam = this.tableHdl.assembleTableParam();
        API.component.componentReviewList(tableParam).then(result => {
          this.tableLoading = false;
          const {data = [], total = 0} = result;
          this.reviewList = data.map(d => {
            const {auditResult} = d;
            const reviewResult = componentReviewArray.find(type => type.value === auditResult);
            return {...d, reviewResultText: reviewResult.label, auditResultBtn: d.auditResult === 0};
          });
          this.tableHdl.total = total;
        }).catch(err => {
          console.log('err', err)
          this.tableLoading = false;
        });
      },
      reviewFormSubmit() {
        this.$refs[this.reviewFormRef].validate((valid) => {
          if (!valid) return;
          this.reviewFormLoading = true;
          this.componentReviewHandle()
        })
      },
      componentReviewHandle() {
        this.tableLoading = true;
        API.component.componentReviewHandle(this.reviewForm).then((resp) => {
          this.reviewFormLoading = false;
          this.showReviewDialog = false;
          this.$message({
            message: "组件审核成功!",
            type: "success",
            duration: 1500,
          });
          this.tableLoading = false;
          this.resetReviewForm();
          this.getReviewList();
        }).catch((err) => {
          this.reviewFormLoading = false;
          this.tableLoading = false;
          console.log("err: ", err);
        });
      }
    },
  }
</script>

<style scoped lang="less">

</style>
